<template>
    <view>
        <view class="title">预定优惠券</view>
        <view style="padding: 10px">
            <view v-for="item in activityItems" class="item-box">
                <view class="left">
                    <view>女神现金券{{ numberFormat(item.giDicm, 2) }}元</view>
                    <view class="extra">仅适用于{{ item.giName }}</view>
                    <view class="extra">有效期：{{ UTCTimeToLocal(activity.gpEnti, "YYYY-MM-DD") }}</view>
                </view>
                <view class="right">
                    <view>￥{{ item.giDicm }}</view>
                    <button v-if="checkAppointment(item.giUuid)" size="mini" type="warn" @click="() => handleItemAppointment(item)">立即领取</button>
                    <button v-else size="mini" disabled="true">已领取</button>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { UTCTimeToLocal, numberFormat } from "../../utils/helper";
import { createItemAppointment } from "../../utils/api";

export default {
    props: {
        activity: {
            type: Object,
            default() {
                return {};
            },
        },
        activityItems: {
            type: Array,
            default() {
                return [];
            },
        },
        appointment: {
            type: Array,
            default() {
                return [];
            },
        },
        callback: {
            type: Function,
            default: () => {},
        },
    },
    data() {
        return {};
    },

    watch: {},

    methods: {
        checkAppointment(giUuid) {
            return this.appointment.findIndex((_item) => _item.giUuid === giUuid) === -1;
        },
        async handleItemAppointment(record) {
            let userInfo = uni.getStorageSync("userInfo");
            let shareId = uni.getStorageSync("shareId") || ""; // 分享人ID
            let staffId = uni.getStorageSync("staffId") || ""; // 员工ID
            const data = {
                gpUuid: record.gpUuid,
                giUuid: record.giUuid,
                gaBoti: new Date().getUTCTime(),
                gaDisc: record.giDicm || 0,
                gaStti: this.activity.gpStti,
                gaEnti: this.activity.gpEnti,
                gaApid: userInfo.ciUuid,
                giBoqu: Number(record.giBoqu) + 1,
                // giName: record.giName,
                gaStid: staffId || null,
                gaCuid: shareId || null,
            };
            let res = await createItemAppointment(data);
            if (res) {
                this.callback(record.gpUuid, userInfo?.ciUuid);
                uni.showToast({ title: "预约成功" });
            }
        },
        numberFormat(num, digit = 0) {
            return numberFormat(num, digit);
        },
        UTCTimeToLocal(time, format) {
            return UTCTimeToLocal(time, format);
        },
    },
};
</script>

<style lang="scss" scoped>
.title {
    padding: 10px;
    border-bottom: 1px solid #eee;
}

.item-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #feeeed;
    // height: 100px;
    margin-bottom: 10px;
}

.item-box .left {
    flex: 1;
    border-right: 1px solid #cde6c7;
    padding: 16px 0 16px 16px;
}

.item-box .extra {
    font-size: 12px;
    color: #a1a3a6;
}

.item-box .right {
    text-align: center;
    width: 35%;
}

.item-box .right button {
    margin-top: 10px;
}
</style>
